<template>
	<view class="utility-container">
		<view class="service-grid">
			<view 
				v-for="(item, index) in utilities" 
				:key="index" 
				class="service-item"
				@click="handleServiceClick(item)"
			>
				<image :src="item.icon" class="service-icon" />
				<view class="service-name">{{ item.name }}</view>
				<view v-if="item.badge" class="service-badge">{{ item.badge }}</view>
			</view>
		</view>
		
		<view class="policy-notice">
			<view class="notice-title">缴费须知</view>
			<view class="notice-content">
				<text>1. 缴费数据每月凌晨更新，滞纳金按0.05%/日计算\n</text>
				<text>2. 电子发票可通过「我的-票据管理」获取\n</text>
				<text>3. 缴费异常请联系物业客服：400-123-4567</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				utilities: [
					{ name: '水费', icon: '/static/service-water.png', available: true },
					{ name: '电费', icon: '/static/service-electric.png', available: true, badge: '优惠中' },
					{ name: '燃气费', icon: '/static/service-gas.png', available: false },
					{ name: '物业费', icon: '/static/service-property.png', available: true },
					{ name: '停车费', icon: '/static/service-parking-fee.png', available: true },
					{ name: '宽带费', icon: '/static/service-network.png', available: true }
				]
			}
		},
		methods: {
			handleServiceClick(item) {
				if (!item.available) {
					uni.showToast({ title: '暂未开放', icon: 'none' });
					return;
				}
				uni.navigateTo({
					url: '/pages/order/order?type=' + item.name
				});
			}
		}
	}
</script>

<style>
	.utility-container {
		background: #f6f8fa;
		min-height: 100vh;
		padding-bottom: 60rpx;
	}

	.service-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 24rpx;
	}

	.service-item {
		position: relative;
		width: 41.1%;
		padding: 24rpx;
		text-align: center;
		background: #fff;
		border-radius: 18rpx;
		margin: 8rpx;
		box-shadow: 0 2rpx 8rpx rgba(74,144,226,0.08);
	}

	.service-icon {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 16rpx;
	}

	.service-name {
		font-size: 28rpx;
		color: #333;
	}

	.service-badge {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		background: #e64340;
		color: #fff;
		font-size: 20rpx;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
	}

	.service-item:active {
		background-color: #f5f5f5;
	}
	
	/* 新增样式 */
	.policy-notice {
		margin: 40rpx 24rpx 0;
		background: #fff;
		border-radius: 18rpx;
		padding: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(74,144,226,0.05);
	}
	
	.notice-title {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 16rpx;
	}
	
	.notice-content {
		font-size: 24rpx;
		color: #666;
		line-height: 1.8;
	}
	
	.notice-content text {
		display: block;
	}
</style>
